<template>
    <div>
        <my-nvaigation-bar></my-nvaigation-bar>
        <div id="Glxt_containner">
            <el-row>
                <el-col :span="24" id="Glxt_bigtitle">商品订单</el-col>
            </el-row>
  
            <el-row style="margin-top: 20px;">
              <el-col :span="20">
                <!--查询表单-->
                <el-form :inline="true" class="demo-form-inline">
                <el-form-item label="订单ID">
                    <el-input v-model="searchObj.id" placeholder="请输入订单ID" /> 
                </el-form-item>
                <el-form-item label="商品ID">
                    <el-input v-model="searchObj.goodsId" placeholder="请输入商品ID" /> 
                </el-form-item>
                <el-form-item label="用户ID">
                    <el-input v-model="searchObj.buyerId" placeholder="请输入用户ID" /> 
                </el-form-item>
                <el-form-item label="权限">
                    <el-select v-model="searchObj.status" clearable placeholder="订单状态">
                    <el-option value="0" label="已过期"/>
                    <el-option value="1" label="未支付"/>
                    <el-option value="2" label="已完成"/>
                    </el-select>
                </el-form-item>
                <!--这个单选框↑，使用完v-for要空一行，要不的话会有红色的>，然后下面的代码都加粗了，不知道为什么-->
                <el-button type="primary" icon="el-icon-search" @click="fetchData()">查询</el-button>
                <el-button type="default" @click="resetData()">清空</el-button>
                </el-form>
              </el-col>
            </el-row>
            
            
            <!--表格-->
            <el-table :data="list" style="width: 100%">
                <el-table-column prop="id" label="订单ID"></el-table-column>
                <el-table-column prop="goodsId" label="商品ID"></el-table-column>
                <el-table-column prop="buyerId" label="用户ID"></el-table-column>
                <el-table-column label="订单状态">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.status === 0" type="success" size="mini">已过期</el-tag>
                        <el-tag v-if="scope.row.status === 1" size="mini">未支付</el-tag>
                        <el-tag v-if="scope.row.status === 2" size="mini">已完成</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" label="创建时间"></el-table-column>
                <el-table-column prop="updateTime" label="修改时间"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="deleteClick(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
  
            <!--页码-->
            <el-row>
                <el-col :span="24"><el-pagination background layout="prev, pager, next" :total="total" :current-page="page" @current-change="changeCurrentPage"></el-pagination></el-col>
            </el-row>
        </div>
    </div>
  </template>


<script>
import MyNvaigationBar from '../../components/MyNvaigationBar.vue'
import shopOrderApi from '../../api/shop/shopOrder'

export default {
    components: { MyNvaigationBar },
    data() {
        return {
            list: [], // 订单列表
            total: 0, // 总记录数
            page: 1, // 页码
            limit: 10, // 每页记录数
            searchObj: {}, // 查询条件
            drawer: false,
        }
    },
    //页面渲染成功后获取数据
    methods: {
        // 改变页码，page：回调参数，表示当前选中的“页码”
        changeCurrentPage(page) {
            this.page = page
            this.fetchData()
        },
        // 重置表单
        resetData() {
            this.searchObj = {}
            this.fetchData()
        },
        //删除用户
        deleteClick(id) {
            this.$confirm('你确定要删除'+id+'号订单吗','提示',{
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                return shopOrderApi.remove(id)
            }).then((res) => {
                this.fetchData()
                this.$message.info(res.data.message)
            }).catch(err => {
                if (err === 'cancel') {
                    this.$message.info('取消删除')
                }
            })
        },
        //初始化
        fetchData() {
            shopOrderApi.pageList(this.page, this.limit, this.searchObj)
            .then(res => {
                this.list = res.data.data.records
                this.total = res.data.data.total
            })
        },
    },
    created() {
        this.fetchData()
    },
}

</script>

<style>
    #Glxt_containner{
        width: auto;
        height: auto;
        border:3px dashed #42b983;
        padding-top: 8px;
        padding-bottom: 8px;
        border-radius: 8px;
        margin-top: 10px;
    }

    #Glxt_bigtitle {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    font-size: 20px;
    font-weight: bolder;
    color:#42b983;
    }

    .image{
        width: 100%;
        height: 324px;
    }

</style>